<template>
  <div class="address_edit">
    <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete">
      <div solt="default" class="tips">
        提醒：每次下单时会使用该地址，实际下单地址会根据您购物切换的地区进行智能判断，请在下单时确认。
      </div>
    </van-address-edit>
  </div>
</template>

<script>
  import {
    areaList
  } from "@vant/area-data";
  import {
    getAddressDetailByIdAPI,
    saveAddressAPI,
    deleteAddressByIdAPI,
  } from "@/api/address.js";
  export default {
    data() {
      return {
        areaList, //地区列表
        addressInfo: {
          //收货人信息初始值
          id: "", //每条地址的唯一标识
          name: "", //姓名
          tel: "", //电话
          province: "", //省份
          city: "", //城市
          county: "", //区县
          areaCode: "", //地区编码，通过省市区选择获取（必填）
          postalCode: "", //邮政编码
          addressDetail: "", //详细地址
          isDefault: false, //是否选择默认
        },
      };
    },
    props: ["id"],
    created() {
      this.getAddressDetail();
    },
    methods: {
      //根据id获取地址数据
      getAddressDetail() {
        if (!this.id) {
          console.log(this.id); //id==0 则是新增 否则是编辑              
          return;
        }
        //获取登录用户的收货地址
        getAddressDetailByIdAPI(this.id).then(result => {
          this.addressInfo.id = result.data.id;
          this.addressInfo.name = result.data.name;
          this.addressInfo.tel = result.data.tel;
          this.addressInfo.province = result.data.province;
          this.addressInfo.city = result.data.city;
          this.addressInfo.county = result.data.county;
          this.addressInfo.areaCode = result.data.area_code;
          this.addressInfo.postalCode = result.data.postal_code;
          this.addressInfo.addressDetail = result.data.address_detail;
          this.addressInfo.isDefault = result.data.is_default == 1 ? true : false;
        });
      },
      //处理保存地址
      onSave(content) {
        let params = {};
        params.id = content.id;
        params.name = content.name;
        params.tel = content.tel;
        params.province = content.province;
        params.city = content.city;
        params.county = content.county;
        params.area_code = content.areaCode;
        params.postal_code = content.postalCode;
        params.address_detail = content.addressDetail;
        params.is_default = content.isDefault == true ? 1 : 0;
        saveAddressAPI(params).then(result=>{
          this.$toast(result.msg); //地址修改成功
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        });          
      },
      // 处理删除地址
      onDelete(content) {
        let id = content.id;
        if (!id)  return;
        deleteAddressByIdAPI(id).then(result=>{
          this.$toast(result.msg); //删除成功
          setTimeout(() => {
            this.$router.go(-1); //页面跳转
          }, 1000);        
        });          
      },
    },
  };
</script>

<style scoped lang="less">
  @bgColor: #f8f8f8;
  @mainColor: #ff0000;
  .address_edit {
    /deep/.van-address-edit {
      border-top: 5px solid @bgColor;
      position: relative;
      .van-address-edit__buttons {
        margin-top: 70px;
        .van-button--danger {
          background: @mainColor;
          border-color: @mainColor;
        }
      }
      .tips {
        padding: 12px 12px;
        font-size: 12px;
        color: @mainColor;
      }
    }
  }
</style>

